<template>
  <div class="activitytypeForm">
    <!-- element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 -->
    <!-- :visible.sync 子组键改变父组件的值 控制子组件的显示-->
    <el-dialog title="新增用戶" :visible.sync="editDialogIsShow" :before-close="handleClose" :close-on-click-modal="false">
      <div style="position: absolute;top:83px;left:225px;" v-show="oldImg">
        <img :src="getImgUrl(this.activitytype.stimg)" style="width: 146px;height: 146px;border-radius: 4px"/>
      </div>
      <el-form   label-width="120px"  ref="editTeacherUploadForm">
        <!-- 代码中的1表示第几个 和引入js的type变量对应 -->
        <el-form-item label="头像">
          <el-upload
            class="upload"
            :action="getUploadUrl"
            list-type="picture-card"
            :limit="1"
            accept="image/*"
            :on-change="(file,fileList)=>{imgHandleChange(file,fileList,1,this,'editActivitytypeUploadForm','activitytype')}"
            :on-remove="(file,fileList)=>{imgHandleRemove(1,this)}"
            :on-before="(file,fileList)=>{imghandleBeforeUpload(file,1,this)}"
            :auto-upload="false"
            :file-list="fileList[0]"
            ref="file1">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!--<viewer-dialog ref="viewer" :images="imagesUp"></viewer-dialog>-->
        </el-form-item>
      </el-form>
      <el-form :model="activitytype" label-width="80px" :rules="editActivitytypeRules" ref="editActivitytypeForm">
        <el-form-item label="姓名" prop="atname">
          <el-col :span="16">
            <el-input v-model="activitytype.atname" placeholder="请填入姓名" clearable/>
          </el-col>
        </el-form-item>
        <el-form-item label="状态" prop="atstate">
          <el-col :span="16">
            <el-input v-model="activitytype.atstate" placeholder="请填入状态" clearable/>
          </el-col>
        </el-form-item>
        <el-form-item label="描述" prop="atdesc">
          <el-col :span="16">
            <el-input v-model="activitytype.atdesc" placeholder="请填入描述" clearable/>
          </el-col>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="12">
          <span>&nbsp;</span></el-col>
        <el-col :span="6">
          <span><el-button type="primary" @click="editActivitytype('editActivitytypeForm')">修改</el-button></span>
        </el-col>

      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import api from "../../../../axios/api"
import rules from "../../../../static/js/validator/rules.js"
import utils from "../../../../static/js/utils/upload.js"
const favOptions = [{num: 0, name: '足球'}, {num: 1, name: '篮球'}, {num: 2, name: '游泳'}, {num: 3, name: '跳舞'}];
var initfavOption = [];
export default {
  name: "editActivitytype",
  data() {
    return {
      oldImg: false,
      //上传使用
      fileList: [[],[],[]], //缓存区文件
      uploadFile:[[],[],[]], //  上传用文件
      formData:{files:[]},
      imagesUp:null,
      //上传使用结束
      activitytype: {atname: "", asex: "", favs: [], activitytypegroup: null, email: null},
      checkAll: false,
      //checkedFavs: ['唱歌', '游泳'],
      favs: favOptions,
      isIndeterminate: true,
      allActivitytypeGroup: [{num: 0, "groupName": "初级会员"}, {num: 1, "groupName": "中级会员"}, {num: 2, "groupName": "高级会员"}],
      editActivitytypeRules: {
        name: [{required: true, message: "姓名不能为空", trigger: 'blur'}, {trigger: 'blur', validator: this.validateName},
          {max: 20, min: 2, message: '长度异常 长度在2-20之间', trigger: 'blur'}, {
            pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
            message: '姓名必须为中文',
            trigger: 'blur'
          }],
        aemail: [{required: true, message: "邮件不能为空", trigger: 'blur'}, {
          trigger: 'change',
          validator: rules.FormValidate.Form().validateEmail
        }],
        aid: [{required: true, message: "姓名不能为空", trigger: 'blur'}],
        apwd: [{required: true, message: "姓名不能为空", trigger: 'blur'}],
        astate: [{required: true, message: "姓名不能为空", trigger: 'blur'}],

      },
      editDialogIsShow: false

    }
  },
  methods: {
    validateName: function (rule, value, callback) {
      console.log(rule);
      if (value == 1) {
        callback(new Error("1不正常"));
      } else {
        callback();
      }
    },
    init(activitytype) {
      this.fileList = [[],[],[]] //缓存区文件
      this.uploadFile = [[],[],[]],
      this.editDialogIsShow = true;
      this.activitytype = activitytype;
      console.log(activitytype);
      if(this.activitytype.stimg!=null&&this.activitytype.stimg!=''){
        this.oldImg = true;
      }

    },
    handleCheckAllChange(val) {
      this.activitytype.favs = val ? initfavOption : [];
      this.isIndeterminate = false;
    },
    handleCheckedFavsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.favs.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.favs.length;
    },
    editActivitytype: function (editActivitytypeForm) {
      this.$refs[editActivitytypeForm].validate(valid => {//此处refs对象和标签上的ref对应
        if (valid) {
          //如果通过验证 to do...
          console.log(this.activitytype);
          this.setDataFromAxios();
          alert(this.activitytype.atno + "修改成功");
          this.handleClose();
        } else {
          console.log('error submit!!')
          return false
        }
      });
    },
    //关闭页面
    handleClose() {
      this.editDialogIsShow = false;
      //给父组件传参
      this.$emit("editDialogIsShow", this.editDialogIsShow);
    },
    setDataFromAxios: function () {
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios("/api/activitytypeController/updateActivitytypeByAtno", this.activitytype, "post")
    },
    getImgUrl: function (imgsrc) {
      return  this.$activitytype.state.host + "/upload/images/activitytype/" + imgsrc;
    },
    imghandleBeforeUpload(file,type,vm) {

      return utils.UPLOAD.Upload().handleBeforeUpload(file,type,vm);
    },
    imgHandleChange(file, fileList, type,vm,modelName,name) {
      if(vm.fileList[type].length!=0){
        alert("请先删除再提交")
      }
      return utils.UPLOAD.Upload().handleChange(file, fileList, type,vm,modelName,name);
    },
    imgHandleRemove(type,vm) {

      return utils.UPLOAD.Upload().handleRemove( type,vm);
    },
    uploadImg:function(modelName,name){
      //  使用formdata格式
      let formData = new FormData();
      formData.append("model",modelName);//图片上传子目录
      console.log(formData);
      console.log(this.formData.files[name]);
      if (this.formData.files[name]) {
        formData.append("file", this.formData.files[name]);
      }
      console.log("----------------------------");
      console.log(formData);
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios(this.$activitytype.state.host+"/uploadImg",formData,"post",{headers: { "Content-Type": "multipart/form-data" }})
        .then(dto=>{
          this.oldImg = false;
          this.$message.info("上传图片成功!");
          if(dto.code==200){
            this.activitytype.stimg = dto.obj;
          }
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
    },
  },
  computed:{
    getUploadUrl(){
      return      this.$activitytype.state.host+"/uploadImg";
    }
  },
  //监听
  watch: {
    editDialogIsShow(newValue, oldValue) {//配合:visible.sync监听变化
      this.editDialogIsShow = newValue;
    }
  },
  created() {
    for (var favindex = 0; favindex < favOptions.length; favindex++) {
      initfavOption.push(favOptions[favindex].name);
    }
  }
}
</script>
<style scoped lang="stylus">
.activitytypeForm
  margin 0 auto
  width 1000px
  height 600px
  text-align left
</style>
